<template>
  <div class="content">
    <div>
      <img src="@/assets/images/policy/policy-top.jpg">
    </div>
    <div class="top-btn">
      <div class="top-info">完善信息，为您精准匹配政策</div>
    </div>
    <div class="police-block">
      <div class="status-block">
        <div class="status-name">1、请问您的身份？</div>
        <el-radio-group v-model="studentKey">
          <el-radio :label="1">应届生</el-radio>
          <el-radio :label="2">非应届生</el-radio>
        </el-radio-group>

      </div>
      <div class="graduate-block">
        <div class="graduate-name">2、请问您的毕业信息？</div>
        <input type="text" class="graduate-type" v-model="major" placeholder="请输入毕业专业">
        <template>
          <el-select v-model="educationTypeIndex" placeholder="请选择">
            <el-option class="graduate-box"
                       v-for="item in graduateList"
                       :key="item.id"
                       :label="item.value"
                       :value="item.id">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="status-block">
        <div class="status-name">3、请问您的需求是什么？</div>
        <el-radio-group v-model="workKey">
          <el-radio :label="1">就业</el-radio>
          <el-radio :label="2">创业</el-radio>
        </el-radio-group>
      </div>
      <div class="post-block">
        <div class="post-name">4、请问您是否具有专业技术职称？</div>
        <template>
          <el-select class="post-box" v-model="titleTypeIndex" placeholder="请选择">
            <el-option
                v-for="item in titleTypeArray"
                :key="item.id"
                :label="item.value"
                :value="item.id">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="post-block">
        <div class="post-name">5、请问您是否具有职业资格证书？</div>
        <template>
          <el-select class="post-box" v-model="seniorityTypeIndex" placeholder="请选择">
            <el-option
                v-for="item in seniorityTypeArray"
                :key="item.id"
                :label="item.value"
                :value="item.id">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="post-block">
        <div class="post-name">6、请问您的研究工作领域？</div>
        <template>
          <el-select class="post-box" v-model="fieldTypeIndex" placeholder="请选择">
            <el-option
                v-for="item in fieldTypeArray"
                :key="item.id"
                :label="item.data"
                :value="item.id">
            </el-option>
          </el-select>
        </template>
      </div>
      <div class="bottom-btn">
        <div class="btn2 bottom-info" @click="addUserPolicyInfo">一键匹配</div>
      </div>
    </div>
    <CoverLoading v-if="coverLoading" type="2"></CoverLoading>
  </div>
</template>

<script>

import {addUserPolicyInfoApi, getIndustryApi, getUserPolicyInfoApi} from "@/api/userPolicyInfo";
import CoverLoading from '@/components/CoverLoading/CoverLoading';
export default {
  name: "PolicyInfo",
  components: {
    CoverLoading
  },
  data() {
    return {
      coverLoading:false,
      addressKey: 0,
      studentKey: 0,
      major: '',
      workKey: 0,
      titleTypeIndex: '',
      titleTypeArray: [
        {id: 1, value: '是'},
        {id: 2, value: '否'},
      ],
      educationTypeIndex: '',
      seniorityTypeArray: [
        {id: 1, value: '是'},
        {id: 2, value: '否'},
      ],
      seniorityTypeIndex: '',
      fieldTypeArray: [
        {id: 1, value: '是'},
        {id: 2, value: '否'},
      ],
      fieldTypeIndex: '',
      graduateList: [
        {id: 1, value: '小学'},
        {id: 2, value: '初中'},
        {id: 3, value: '高中'},
        {id: 4, value: '大专'},
        {id: 5, value: '本科'},
        {id: 6, value: '研究生'},
        {id: 7, value: '博士'},
      ],
      policyInfoType: 0

    }
  },
  methods: {

    getUserPolicyInfo() {
      getUserPolicyInfoApi().then((res) => {

          this.policyInfoType = res;
          if (this.policyInfoType===1) {
            this.$router.push({ path: '/policyList?type=5' });
          }else
          {
            this.getIndustry();
          }


      }).catch((res) => {
        console.log(res)
      })
    },
    getIndustry() {
      getIndustryApi().then((res) => {
      this.fieldTypeArray = res ?? [];


      }).catch((res) => {
        console.log(res)
      })
    },
    addUserPolicyInfo() {
      if (this.addressKey < 1) {
        this.utils.showToast('请选择您在哪里！')
        return false
      }
      if (this.studentKey < 1) {
        this.$message('请选择您的身份!');
        return false
      }
      if (this.major == null || this.major == '') {
        this.$message('请填写您的专业！')
        return false
      }
      if (this.educationTypeIndex < 0) {
        this.$message('请选择您的学历！')
        return false
      }
      if (this.workKey < 1) {
        this.$message('请选择您的需求！')
        return false
      }
      if (this.titleTypeIndex < 0) {
        this.$message('请选择您是否具有专业技术职称！')
        return false
      }
      if (this.seniorityTypeIndex < 0) {
        this.$message('请选择您是否具有职业资格证书！')
        return false
      }
      if (this.fieldTypeIndex < 0) {
        this.$message('请选择您的研究领域！')
        return false
      }
      this.coverLoading=true

      addUserPolicyInfoApi({
        seat: this.addressKey, identity: this.studentKey, major: this.major, education: this.educationTypeIndex,
        workingCondition: this.workKey, qualificationsState: this.seniorityTypeIndex, titleState: this.titleTypeIndex,
        industry: this.fieldTypeIndex
      }).then((res) => {
          setTimeout(()=>{
            this.coverLoading=false
            this.$router.push({path: '/policyList?type=5'})
          },2000)

      }).catch((res) => {
        console.log(res)
      })
    },
  },
  mounted() {
    this.getUserPolicyInfo();

  }
}
</script>

<style lang="scss" scoped>
.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
}

.content {
  background-color: #F6F6F6;

  .top-btn {
    height: 30px;
    width: 250px;
    background-color: $orange;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    margin: 20px 800px;

    .top-info {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
    }
  }

  .police-block {
    width: calc(100% - 720px);
    height: auto;
    background-color: #fff;
    margin-left: 360px;
    padding: 50px;
    margin-bottom: 20px;

    .status-block {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      align-items: center;

      .status-name {
        margin-right: 20px;
        font-weight: bold;
      }

      .status-type {
        margin-left: 10px;
      }
    }

    .graduate-block {
      margin-top: 20px;
      margin-bottom: 20px;

      .graduate-name {
        font-weight: bold;
      }

      .graduate-type {
        background-color: #e4e4e4;
        width: 300px;
        padding: 10px;
        margin: 10px 20px 10px 0;
        color: $darkGray;
        border-radius: 5px;
      }

      .graduate-box {
        background-color: #e4e4e4;
        width: 300px;
        padding: 10px;
        margin: 10px 20px 10px 0;
        color: $darkGray;
        border-radius: 5px;
      }
    }

    .post-block {
      margin-top: 20px;

      .post-name {
        font-weight: bold;
      }

      .post-box {
        width: 300px;
        padding: 10px;
        margin: 10px 20px 10px 0;
        color: $darkGray;
        border-radius: 5px;
      }
    }

    .bottom-btn {
      height: 40px;
      width: 130px;
      background-color: $orange;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      margin: 40px 0 0 500px;

      .bottom-info {
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
      }
    }
  }
}
</style>
